<template>
    <div id="print-iframe">
        <div class="title">
            <div v-if="use_store.status == 2">
                <div class="first">中国国际海运集装箱（集团）股份有限公司</div>
                <div class="second">CHINA INTERNATIONAL MARINE CONTAINERS （GROUP） CO., LTD.</div>
                <div class="third">CIMC R&D Center, No.2 Gangwan Avenue, Shekou Industrial Zone, Shenzhen, Guangdong,
                    China</div>
                <div class="fourth"><span>Tel: (755) 26691130</span><span class="phone"></span><span class="number">
                        Fax: (755) 26692707
                    </span></div>
            </div>
            <div v-else>
                <div class="first">上海中集宝伟工业有限公司</div>
                <div class="second">Shanghai CIMC Baowell Industries Co.,Ltd.</div>
                <div class="third">No.1881 Yueluo Road, Baoshan, Shanghai, China</div>
                <div class="fourth"><span>Tel: 86-021-56860000</span><span class="phone"></span><span
                        class="number">Fax:
                        86-021-56863985
                    </span></div>
            </div>
        </div>
        <div class="No">
            <span style="font-weight: 800;">No.:</span> <span>{{ invoice.invoiceNumber }}</span>
        </div>
        <div class="main">
            <img src="../assets/main.png" alt="">
            <div class="first_first">
                <div class="title">
                    SOLD BY ORDER AND FOR ACCOUNT AND RISK OF THE BUYER:
                </div>
                <div class="buyer">
                    {{ invoice.customerName }}
                </div>
                <div class="address">
                    <div class="addr">
                        Address:
                    </div>
                    <div class="note">
                        {{ invoice.customerAddress }}
                    </div>
                </div>
            </div>
            <div class="first_second">
                <div class="title">
                    Date:
                </div>
                <div class="date">
                    日期:<span>{{ invoice.invoiceDate }}</span>
                </div>
            </div>
            <div class="first_third">
                <div class="price">
                    <div class="title">
                        Price Terms:
                    </div>
                    <div class="note">
                        价格条款:<span>{{ invoice.priceTerms }}</span>
                    </div>
                </div>
                <div class="payment">
                    <div class="title">
                        Terms/method of payment:
                    </div>
                    <div class="note">
                        <div class="left">
                            付款条款：
                        </div>
                        <div class="right">
                            {{ invoice.paymentProvision }}
                        </div>
                    </div>
                </div>
                <div class="due">
                    <div class="title">
                        Payment Due Date:
                    </div>
                    <div class="note">
                        合同规定客户付款日：{{ invoice.paymentDate }}
                    </div>
                </div>
            </div>
            <div class="second">
                <!-- <img src="../assets/description.png" alt="" class="des">
                <img src="../assets/quantity.png" alt="" class="quan">
                <img src="../assets/price.png" alt="" class="price">
                <img src="../assets/amount.png" alt="" class="amount"> -->
                <div class="des">
                    <div>
                        Description
                    </div>
                    <div>
                        品名、规格
                    </div>
                </div>
                <div class="quan">
                    <div>
                        Quantity
                    </div>
                    <div>
                        数量
                    </div>
                </div>
                <div class="price">
                    <div>
                        Unit Price
                    </div>
                    <div>
                        单价
                    </div>
                </div>
                <div class="amount">
                    <div>
                        Amount
                    </div>
                    <div>
                        金额
                    </div>
                </div>
            </div>
            <div class="third">
                <div class="third_first">
                    <!-- <div class="contract">
                        <span>Contract No:</span>
                        <span class="no">AAAAAAAAAAAA</span>
                    </div> -->
                    <!-- <div>

                    </div> -->
                    <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small">
                        <el-form-item label="Contract No.:">
                            {{ invoice.contractNo }}
                        </el-form-item>
                        <div v-if="invoice.list[0].description != ''">
                            <el-form-item :label="invoice.list[0].description ? invoice.list[0].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[0].description ? invoice.list[0].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[1].description != ''">
                            <el-form-item :label="invoice.list[1].description ? invoice.list[1].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[1].description ? invoice.list[1].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[2].description != ''">
                            <el-form-item :label="invoice.list[2].description ? invoice.list[2].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[2].description ? invoice.list[2].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[3].description != ''">
                            <el-form-item :label="invoice.list[3].description ? invoice.list[3].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[3].description ? invoice.list[3].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[4].description != ''">
                            <el-form-item :label="invoice.list[4].description ? invoice.list[4].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[4].description ? invoice.list[4].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[5].description != ''">
                            <el-form-item :label="invoice.list[5].description ? invoice.list[5].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[5].description ? invoice.list[5].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[6].description != ''">
                            <el-form-item :label="invoice.list[6].description ? invoice.list[6].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[6].description ? invoice.list[6].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[7].description != ''">
                            <el-form-item :label="invoice.list[7].description ? invoice.list[7].description : ' '"
                                v-if="use_store.status != 4">
                                Steel Dry Cargo Container
                            </el-form-item>
                            <el-form-item :label="invoice.list[7].description ? invoice.list[7].description : ' '"
                                v-else>
                            </el-form-item>
                        </div>
                        <el-form-item label=" ">
                            <span>{{ (invoice.invoiceRatio && invoice.invoiceRatio != "100") ? invoice.invoiceRatio +
                                "%" :
                                "" }}</span>
                            <span>{{ invoice.invoiceRatio != "100" ? invoice.invoiceMethod : '' }}</span>
                        </el-form-item>
                    </el-form>
                    <!-- <div class="payment">
                    </div> -->
                    <div class="remit" :style="use_store.status == 2 ? 'bottom:0px' : ''">
                        <div>
                            {{ invoice.bankInfo }}
                        </div>
                    </div>
                </div>
                <div class="third_second">
                    <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small">
                        <el-form-item label=" ">
                        </el-form-item>
                        <div v-for="(item, index) in invoice.list">
                            <div
                                v-if="invoice.list[index].description != '' && invoice.list[index].description != 'Freight'">
                                <el-form-item>
                                    <span>
                                        {{ invoice.list[index].quantity }}
                                    </span>
                                </el-form-item>
                            </div>
                            <el-form-item label=" " v-if="invoice.list[index].description == 'Freight'"></el-form-item>
                        </div>

                    </el-form>
                </div>
                <div class="third_third">
                    <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small">
                        <el-form-item label=" ">
                        </el-form-item>
                        <div v-for="(item, index) in invoice.list">
                            <div
                                v-if="invoice.list[index].description != '' && invoice.list[index].description != 'Freight'">
                                <el-form-item>
                                    <span>{{ invoice.unitPrice }}</span>
                                    <span>{{ invoice.list[index].unitPrice }}</span>
                                </el-form-item>
                            </div>
                            <el-form-item label=" " v-if="invoice.list[index].description == 'Freight'"></el-form-item>
                        </div>

                    </el-form>
                </div>
                <div class="third_fourth">
                    <el-form label-position="right" label-width="auto" style="max-width: 600px" size="small">
                        <el-form-item label=" ">
                        </el-form-item>
                        <div v-if="invoice.list[0].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[0].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[1].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[1].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[2].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[2].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[3].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[3].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[4].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[4].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[5].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[5].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[6].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[6].amount }}</span>
                            </el-form-item>
                        </div>
                        <div v-if="invoice.list[7].description != ''">
                            <el-form-item>
                                <span>{{ invoice.unitPrice }}</span>
                                <span>{{ invoice.list[7].amount }}</span>
                            </el-form-item>
                        </div>
                        <el-form-item v-if="invoice.type != '外销-形式发票-零部件' && invoice.invoiceRatio != '100'">
                            <span>{{ invoice.unitPrice }}</span>
                            <span class="total">{{ invoice.commodityMoney }}</span>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="fourth">
                <div class="fourth_first">
                    TOTAL
                </div>
                <div class="fourth_second">
                    {{ invoice.commodityTotal }}
                </div>
                <div class="fourth_third"></div>
                <div class="fourth_fourth">
                    <div>
                        <span>{{ invoice.unitPrice }}</span>
                        <span class="total">{{ invoice.commodityMoney }}</span>
                    </div>
                </div>
            </div>
            <div class="fifth">
                <div>
                    <span>Say</span>
                    <span>{{ invoice.say }}</span>
                    <span>{{ invoice.englishMoney }}</span>
                </div>
            </div>
            <div class="sixth">
                <div class="head" v-if="use_store.status != 2">
                    <div>
                        For and on behalf of
                    </div>
                    <div>
                        Shanghai CIMC Baowell Industries Co., Ltd.,
                    </div>
                </div>
                <div class="head" v-else>
                    <div>
                        For and on behalf of
                    </div>
                    <div>
                        ChinaInternationalMarine Containers (Grup) Co., Ltd.
                    </div>
                </div>
                <img src="../assets/name3.png" alt="">
                <div class="foot" v-if="use_store.status == 2">
                    (Authorized Signatures)
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <el-button @click="convert2canvas">打印</el-button>
        <el-button @click="downloadPDF">下载</el-button>
        <el-button @click="cancel">返回</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import html2canvas from 'html2canvas'
import Canvas2Image from '../utils/canvas'
import { math } from '@/utils/math';
// import '../../node_modules/canvas2image/canvas2image.js'
import printJS from 'print-js'
import jsPDF from "jspdf";
import { useStore } from '@/stores/counter';
import { useRouter } from "vue-router";
import { searchLingBuJian, searchGanXiang, lingbujianDown, lingbujianPrint, ganxiangDown, ganxiangPrint } from "@/utils/invoice";
const use_store = useStore()
const router = useRouter();
const invoice = ref({
    id: '',
    customerName: '',
    invoiceRatio: "100",
    say: '',
    num: 0,
    commodityMoney: '0.00',
    invoiceMethod: '',
    date: '',
    bankAddress: (use_store.status == 3 || use_store.status == 4) ? `BANK OF COMMUNICATIONS SHENZHEN BR ，(SWIFT CODE: COMMCNSHSZN)
Quoting in favor of the Beneficiary:SHANGHAI CIMC BAOWELL INDUSTRIES  CO., LTD.
With Account Number: 443066144146100001164` : '',
    unitPrice: use_store.status == 1 ? '' : 'USD',
    commodityTotal: 0,
    customerAddress: '',
    add: [],
    type: '',
    bankInfo: '',
    bankAccountType: '',
    list: [
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
        {
            amount: "",
            description: "",
            quantity: null,
            remark: "",
            serialNo: "",
            unitPrice: ""
        },
    ],
    priceTerms: '',
    paymentProvision: '',
    paymentMethods: '',
    invoiceDate: '',
    paymentDate: undefined,
    contractNo: '',
    invoiceNumber: undefined,
    englishMoney: '',
    customerNameEasy: ''
})

onMounted(() => {
    search().then(() => {
        if (use_store.operation == 6) {
            setTimeout(() => {
                convert2canvas()
            }, 300);
        } else if (use_store.operation == 7) {
            setTimeout(() => {
                downloadPDF()
            }, 300);
        }
    }).catch(err => {
        console.log(err);

    })
})

function search() {
    return new Promise((resolve, reject) => {
        if (use_store.status == 4) {
            searchLingBuJian(use_store.id).then(res => {
                invoice.value = res.data
                if (res.data.invoiceDate != '' && res.data.invoiceDate != null) {
                    invoice.value.invoiceDate = res.data.invoiceDate
                }
                if (res.data.invoiceNumber != '新') {
                    invoice.value.invoiceNumber = res.data.invoiceNumber
                }
                if (res.data.unitPrice != null && res.data.unitPrice != '') {
                    invoice.value.unitPrice = res.data.unitPrice
                }
                invoice.value.id = res.data.id
                if (res.data.list.length != 0) {
                    invoice.value.list = res.data.list
                }
                invoice.value.say = invoice.value.unitPrice == 'USD' ? 'US Dollars' : 'CNY'
                resolve('1')
            })
        } else {
            searchGanXiang(use_store.id).then(res => {
                invoice.value = res.data
                if (res.data.invoiceNumber != '新') {
                    invoice.value.invoiceNumber = res.data.invoiceNumber
                }
                if (res.data.unitPrice != null && res.data.unitPrice != '') {
                    invoice.value.unitPrice = res.data.unitPrice
                }
                if (res.data.invoiceDate != '' && res.data.invoiceDate != null) {
                    invoice.value.invoiceDate = res.data.invoiceDate
                }
                if (res.data.list.length != 0) {
                    invoice.value.list = res.data.list
                }
                invoice.value.say = invoice.value.unitPrice == 'USD' ? 'US Dollars' : 'CNY'
                resolve('1')
            })
        }
    });

}

async function convert2canvas() {
    let domObj = document.getElementById("print-iframe");
    //获取到DOM节点的位置
    let width = domObj.offsetWidth;
    let height = domObj.offsetHeight;
    //DOM元素的宽高
    let canvas = document.createElement("canvas")
    //创建canvas
    let scale = 10
    //放大比例设置5倍
    canvas.width = width * scale
    canvas.height = height * scale
    //画板的宽高
    let options = {
        logging: true,
        //日志开关，在控制台可以查看html2canvas的内部执行流程
        width: width,
        height: height,
        //避免下载不全
        useCORS: true,
        //【重要】开启跨域配置
        scale: scale,
        canvas: canvas,
        //自定义属性
    }
    html2canvas(domObj, options).then((canvas) => {
        let context = canvas.getContext('2d')
        //关闭锯齿
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        let img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height)
        // 这就是把canvas转化为图片
        var doc = document.createElement('div')
        doc.setAttribute("id", "Image")
        document.body.appendChild(doc);
        document.getElementById('Image').appendChild(img);
        //展示图片的DOM节点
        img.style.width = canvas.width / 10 + 'px';
        img.style.height = canvas.height / 10 + 'px';
        printJS({
            printable: 'Image',
            type: 'html',
            documentTitle: '打印图片',
            header: null,
            style:
                '@media print{ @page { size: A4; margin: 0; mso-header: none; mso-footer: none; } body{margin:0px  } img {display: block; margin: 0px;}}',
            base64: true
        })
        var img1 = document.getElementById('Image')
        document.body.removeChild(img1)
        // router.push({
        //     path: use_store.path
        // })
        if (use_store.status != 4) {
            ganxiangPrint(use_store.id)
        } else {
            lingbujianPrint(use_store.id)
        }
    })
}

async function downloadPDF() {
    let domObj = document.getElementById("print-iframe");
    //获取到DOM节点的位置
    let width = domObj.offsetWidth;
    let height = domObj.offsetHeight;
    //DOM元素的宽高
    let canvas = document.createElement("canvas")
    //创建canvas
    let scale = 2
    //放大比例设置5倍
    canvas.width = width * scale
    canvas.height = height * scale
    //画板的宽高
    let options = {
        logging: true,
        //日志开关，在控制台可以查看html2canvas的内部执行流程
        width: width,
        height: height,
        //避免下载不全
        useCORS: true,
        //【重要】开启跨域配置
        scale: scale,
        canvas: canvas,
        //自定义属性
    }
    html2canvas(domObj, options).then((canvas) => {
        let context = canvas.getContext('2d')
        //关闭锯齿
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        let img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height)
        // 这就是把canvas转化为图片
        var doc = document.createElement('div')
        doc.setAttribute("id", "Image")
        document.body.appendChild(doc);
        document.getElementById('Image').appendChild(img);
        //展示图片的DOM节点
        img.style.width = canvas.width / 2 + 'px';
        img.style.height = canvas.height / 2 + 'px';
        const PDF = new jsPDF('p', 'px', 'a4')
        const pageWidth = PDF.internal.pageSize.getWidth()
        const pageHeight = PDF.internal.pageSize.getHeight()

        const widthRatio = pageWidth / canvas.width
        const heightRatio = pageHeight / canvas.height
        const ratio = widthRatio > heightRatio ? heightRatio : widthRatio

        const canvasWidth = canvas.width * ratio
        const canvasHeight = canvas.height * ratio

        const marginX = (pageWidth - canvasWidth) / 2
        const marginY = (pageHeight - canvasHeight) / 2
        PDF.addImage(img, marginX, marginY, canvasWidth, canvasHeight)
        PDF.save(`${invoice.value.invoiceNumber}-${invoice.value.customerNameEasy}${invoice.value.invoiceRatio ? '-' + invoice.value.invoiceRatio + '%' + invoice.value.invoiceMethod : ''}.pdf`);
        document.body.removeChild(doc)
        if (use_store.status != 4) {
            ganxiangDown(use_store.id)
        } else {
            lingbujianDown(use_store.id)
        }
    })
}
function cancel() {
    router.push({
        path: use_store.path
    })
}
</script>
<style lang="scss" scoped>
#print-iframe {
    margin-left: auto;
    margin-right: auto;
    width: 810px;
    height: 1116px;
    position: relative;
    // border: 1px solid black;
    text-align: center;
    padding-top: 50px;
    font-family: 'Times New Roman', Times, serif;

    .title {
        height: 117px;
        text-align: center;
        margin-bottom: 8px;

        .first {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .second {
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .third {
            position: relative;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .fourth {
            position: relative;
            font-size: 14px;

            .phone {
                display: inline-block;
                width: 45px;
            }
        }
    }

    .No {
        width: 715px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        text-align: right;
        // right: -240px;
    }

    .main {
        margin-left: auto;
        margin-right: auto;
        height: 823px;
        width: 715px;
        text-align: center;

        img {
            width: 715px;
            height: 48px;
            margin-bottom: -3px;
        }

        .first_first {
            height: 250px;
            width: 327px;
            border: 1px solid black;
            float: left;
            border-bottom: 0px;
            position: relative;

            .title {
                line-height: 20px;
                font-size: 12px;
                text-align: left;
                font-weight: 700;
                height: 30px;
                margin-bottom: 18px;
            }

            .buyer {
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 30px;
                line-height: 20px;
                font-size: 12px;
                text-align: left;
                font-weight: 700;
                left: 105px;
                width: 220px;
            }

            .address {
                height: 180px;

                .addr {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 103px;
                    vertical-align: middle;
                    height: 180px;
                    float: left;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 12px;
                }

                .note {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 12px;
                    text-align: left;
                    width: 220px;
                    height: 180px;
                    float: right;
                }
            }

        }

        .first_second {
            width: 388px;
            border: 1px solid black;
            height: 53px;
            float: right;
            border-left: 0px;

            .title {
                margin-top: 5px;
                margin-left: 5px;
                font-weight: 700;
                line-height: 15px;
                font-size: 11px;
                text-align: left;
                height: 18px;
            }

            .date {
                height: 20px;
                margin-left: 5px;
                font-weight: 700;
                line-height: 15px;
                font-size: 11px;
                text-align: left;

                span {
                    margin-left: 60px
                }
            }
        }

        .first_third {
            width: 388px;
            height: 197px;
            float: right;
            border: 1px solid black;
            border-top: 0px;
            border-left: 0px;
            border-bottom: 0px;

            .price {
                height: 45px;
                font-size: 11px;
                font-weight: 700;

                .title {
                    margin-top: 10px;
                    text-align: left;
                    margin-bottom: 10px;
                    height: 20px;
                }

                .note {
                    text-align: left;

                    span {
                        margin-left: 20px;
                    }
                }
            }

            .payment {
                padding-top: 5px;
                height: 100px;
                border-top: 1px solid black;
                border-bottom: 1px solid black;
                font-size: 11px;
                font-weight: 700;

                .title {
                    text-align: left;
                    height: 20px;
                }

                .note {
                    height: 60px;

                    .left {
                        text-align: left;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        width: 65px;
                        height: 50px;
                        vertical-align: middle;
                        float: left;
                        font-weight: 700;
                        line-height: 12px;
                        font-size: 11px;
                    }

                    .right {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        font-weight: 700;
                        line-height: 12px;
                        text-align: left;
                        width: 310px;
                        height: 50px;
                        float: right;
                        font-size: 9px;
                        font-weight: 700;
                    }
                }
            }

            .due {
                .title {
                    padding-top: 5px;
                    height: 20px;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 11px;
                    text-align: left;
                }

                .note {
                    height: 20px;
                    font-weight: 700;
                    line-height: 12px;
                    font-size: 11px;
                    text-align: left;
                }
            }
        }

        .second {
            height: 40px;
            width: 715px;
            float: left;
            background-color: rgb(255, 255, 204);
            font-family: 'Times New Roman', Times, serif;
            font-size: 15px;
            font-weight: 800;

            .des {
                width: 327px;
                height: 40px;
                border: 1px solid black;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .quan {
                width: 80px;
                height: 40px;
                border: 1px solid black;
                border-left: 0px;
                border-right: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .price {
                width: 123px;
                height: 40px;
                border: 1px solid black;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .amount {
                width: 185px;
                height: 40px;
                border: 1px solid black;
                border-left: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
        }

        .third {
            width: 715px;
            height: 351px;
            border-top: 0px;
            float: left;

            .third_first {
                position: relative;
                width: 327px;
                height: 351px;
                border: 1px solid black;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: -3px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;
                        }
                    }

                }

                .remit {
                    height: 120px;
                    bottom: -30px;
                    position: relative;
                    text-align: left;
                    font-size: 13px;
                    font-family: 'Times New Roman', Times, serif;
                    color: black;
                    font-weight: 700;
                    white-space: pre-wrap;
                }
            }

            .third_second {
                width: 80px;
                height: 351px;
                border: 1px solid black;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: -3px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;

                            span {
                                font-family: 'Times New Roman', Times, serif;
                                font-size: 12px;
                                color: black;
                                width: 80px;
                                text-align: center;
                            }
                        }
                    }

                }
            }

            .third_third {
                width: 123px;
                height: 351px;
                border: 1px solid black;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: -3px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            padding-left: 15px;
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;

                            span:nth-child(2) {
                                width: 77px;
                                text-align: right;
                            }
                        }
                    }

                }
            }

            .third_fourth {
                width: 185px;
                height: 351px;
                border: 1px solid black;
                border-left: 0px;
                border-top: 0px;
                float: left;

                .el-form {
                    height: 220px;

                    .el-form-item {
                        margin-bottom: -3px;
                        font-weight: 700;

                        :deep(.el-form-item__label) {
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;
                        }

                        :deep(.el-form-item__content) {
                            padding-left: 35px;
                            font-family: 'Times New Roman', Times, serif;
                            font-size: 12px;
                            color: black;

                            span:nth-child(2) {
                                width: 120px;
                                text-align: right;
                            }
                        }
                    }

                }
            }

            .total {
                // color: red;
            }
        }

        .fourth {
            width: 715px;
            height: 30px;
            float: left;

            .fourth_first {
                width: 327px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 12px;
                font-weight: 800;
            }

            .fourth_second {
                width: 80px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                border-left: 0px;
                border-right: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 13px;
                font-weight: 800;
            }

            .fourth_third {
                width: 123px;
                height: 30px;
                border: 1px solid black;
                border-top: 0px;
                float: left;
            }

            .fourth_fourth {
                width: 185px;
                height: 30px;
                border: 1px solid black;
                border-left: 0px;
                border-top: 0px;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-family: 'Times New Roman', Times, serif;
                font-size: 12px;
                font-weight: 800;
                padding-left: 30px;
                align-items: start;

                div {
                    width: 147px;
                    justify-content: space-between;
                    display: flex;
                }

            }

            .total {
                // color: red;
            }
        }

        .fifth {
            width: 715px;
            height: 53px;
            background-color: rgb(255, 255, 204);
            float: left;
            border: 1px solid black;
            border-top: 0px;
            display: flex;
            flex-direction: column;
            padding-left: 30px;
            text-align: left;
            font-family: 'Times New Roman', Times, serif;
            font-size: 14px;
            font-weight: 800;
            font-style: italic;
            justify-content: center;

            span:nth-child(2) {
                margin-left: 5px;
                margin-right: 20px;
            }

            span:nth-child(3) {
                font-size: 13px;
                // color: red;
            }
        }

        .sixth {
            float: right;
            width: 333px;

            .head {
                line-height: 20px;
                font-size: 14px;
                font-family: 'Times New Roman', Times, serif;
                font-weight: 800;
                z-index: 2;
                position: relative;
            }

            img {
                width: 333px;
                height: 85px;
                margin-top: -10px;
                z-index: 1;
            }

            .foot {
                font-size: 14px;
                font-family: 'Times New Roman', Times, serif;
                font-weight: 800;
                margin-top: -15px;
            }
        }
    }
}

.footer {
    width: 100%;
    text-align: center;
}
</style>
